<script src="<?php echo base_url(); ?>js/jquery/jquery.md5.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {
        var array = [];
        var text = ""
        function checkUser(username) {
            var result;
            if (username != "") {
                $.post('ForgetPassword/checkUsername', {
                    username: username
                }, function(data) {
                    if (data == "true") {
                        $('#forgetUsername').attr('class', "inp-form");
                        $('#error_username').attr('style', 'visibility:hidden');
//                        array.push(true);
                        result = true;
                    } else {
                        $('#forgetUsername').attr('class', "inp-form-error");
                        $('#error_username').attr('style', 'visibility:visible');
                        document.getElementById("error_field_username").innerHTML = 'Not found Username.';
//                        array.push(false); ปิดไปเพราะลองโยนค่าผ่านตัวแปร แต่ก็ยังใช้ไม่ได้...
                        result = false;
                    }
                    array.push(result);
                });
            } else {
                $('#forgetUsername').attr('class', "inp-form-error");
                $('#error_username').attr('style', 'visibility:visible');
                document.getElementById("error_field_username").innerHTML = 'This field is required.';
                array.push(false);

            }
        }

        $('#forgetUsername').blur(function() {
            var result;
            var username = $('#forgetUsername').val();
            if (username != "") {
                $.post('ForgetPassword/checkUsername', {
                    username: username
                }, function(data) {
                    if (data == "true") {
                        $('#forgetUsername').attr('class', "inp-form");
                        $('#error_username').attr('style', 'visibility:hidden');
//                        array.push(true);
                        result = true;
                    } else {
                        $('#forgetUsername').attr('class', "inp-form-error");
                        $('#error_username').attr('style', 'visibility:visible');
                        document.getElementById("error_field_username").innerHTML = 'Not found Username.';
//                        array.push(false);
                        result = false;
                    }
                    array.push(result);
                });
            } else {
                $('#forgetUsername').attr('class', "inp-form-error");
                $('#error_username').attr('style', 'visibility:visible');
                document.getElementById("error_field_username").innerHTML = 'This field is required.';
                array.push(false);

            }
        });

        function checkUserAndId() {
            var username = $('#forgetUsername').val();
            var citizenId = $('#forgetCitizenId').val();
            var result;
            if (username != "" && citizenId != "") {
                $.post('ForgetPassword/checkCitizenIdByUsername', {
                    username: username, citizenId: citizenId
                }, function(data, status) {
                    if (data == "true") {
//                        array.push(true);
                        result = true;
                    } else {
                        $('#forgetCitizenId').attr('class', "inp-form-error");
                        $('#error_citizenid').attr('style', 'visibility:visible');
                        document.getElementById("error_field_citizenid").innerHTML = 'Citizen Id does not match.';
//                        array.push(false);
                        result = false;
                    }
                });
//                array.push(result);
                alert(result);
                alert(result);
            } else {
                array.push(false);
            }

        }

        function checkDigit(id) {
            if (id != "") {
                for (i = 0, sum = 0; i < 12; i++)
                    sum += parseFloat(id.charAt(i)) * (13 - i);
                if ((11 - sum % 11) % 10 != parseFloat(id.charAt(12))) {
                    $('#forgetCitizenId').attr('class', "inp-form-error");
                    $('#error_citizenid').attr('style', 'visibility:visible');
                    document.getElementById("error_field_citizenid").innerHTML = 'Identification number is not correct.';
                    array.push(false);
                }
                else {
                    $('#forgetCitizenId').attr('class', "inp-form");
                    $('#error_citizenid').attr('style', 'visibility:hidden');
                    document.getElementById("error_field_citizenid").innerHTML = 'This field is required.';
                    array.push(true);
                }
            } else {
                $('#forgetCitizenId').attr('class', "inp-form-error");
                $('#error_citizenid').attr('style', 'visibility:visible');
                document.getElementById("error_field_citizenid").innerHTML = 'This field is required.';
                array.push(false);
            }
        }

        $('#forgetCitizenId').blur(function() {
            var citizenId = $('#forgetCitizenId').val();
            checkDigit(citizenId);
        });


//        $('#forgetCitizenId').focusout(function() { // This event fires when a button is clicked
//            var username = $('#forgetUsername').val();
//            var citizenId = $('#forgetCitizenId').val();
//            $.ajax({// ajax call starts
//                url: 'ForgetPassword/checkDigit?username='+username+'&citizenId='+citizenId, // JQuery loads serverside.php
//                dataType: 'json', // Choosing a JSON datatype
//                success: function(data) // Variable data contains the data we get from serverside
//                {
//                     for (var i in data.id) {
//                      alert(data.id[i]);
//                    }
//                }
//
//            });
//            return false; // keeps the page from not refreshing 
//        });

        //validate form
        $("input[name='submit']").click(function() {
            array.length = 0;
            var username = $('input[name=forgetUsername]').val();
            var citzenId = $('input[name=forgetCitizenId]').val();
            checkUser(username);
            checkDigit(citzenId);
            checkUserAndId();
            
            alert('');//ถ้ามี alert อะไรก็ได้เช่นนี้ array ข้างล่างจะทำงานปกติเหมือนที่เซตไว้ข้างบน ถ้าลบ alert ออกเหมือนใน function $.post มันจะไม่เก็บค่า array มาแสดง
            if (array.length > 0) {
                for (i in array) {
                    alert(array[i]);
                    if (!array[i]) {
                        return false;
                        break;
                    }
                }
            }
        });
        $("button[name='reset']").click(function() {
            $("input[name='forgetCitizenId']").val('');
            $("input[name='forgetUsername']").val('');
        });
        // keypress event only numer
        $("input[name='forgetCitizenId']").bind('keypress', function(e) {
            return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) ? false : true;
        });
    });
</script>

<div id="content-outer">
    <div id="content">
        <div id="page-heading"><h1>Forget Password</h1></div>
        <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
            <tbody>
                <tr>
                    <th rowspan="3" class="sized"><img src="<?php echo base_url(); ?>images/shared/side_shadowleft.jpg" width="20" height="300" alt=""></th>
                    <th class="topleft"></th>
                    <td id="tbl-border-top">&nbsp;</td>
                    <th class="topright"></th>
                    <th rowspan="3" class="sized"><img src="<?php echo base_url(); ?>images/shared/side_shadowright.jpg" width="20" height="300" alt=""></th>
                </tr>
                <tr>
                    <td id="tbl-border-left"></td>
                    <td>
                        <!--  start content-table-inner -->
                        <div id="content-table-inner">

                            <table border="0" width="100%" cellpadding="0" cellspacing="0">

                                <tbody><tr valign="top">
                                        <td>


                                            <!-- start id-form -->
                                            <table border="0" cellpadding="0" cellspacing="0" id="id-form">
                                                <?php
                                                echo form_open('ForgetPassword/GotoNextPage');
                                                ?>
                                                <tbody>
                                                <th style="color: red" colspan="3">*If you forgot your Password for Username you can change Password this page. </th>

                                                <tr>
                                                    <td>
                                                        &nbsp;
                                                    </td>
                                                </tr>    
                                                <tr>
                                                    <th valign="top" style="width:150px">Username:</th>
                                                    <td>
                                                        <?php
                                                        echo form_input('forgetUsername', '', 'class="inp-form" id="forgetUsername"');
                                                        ?> 
                                                    </td>
                                                    <td style="width:500px">
                                                        <div width="400px" id="error_username" style="visibility:hidden">
                                                            <div class="error-left"></div>
                                                            <div id="error_field_username" class="error-inner">This field is required.</div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        &nbsp;
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th valign="top">Citizen ID:</th>
                                                    <td>
                                                        <?php
                                                        echo form_input('forgetCitizenId', '', 'class="inp-form" maxlength="13" id="forgetCitizenId"');
                                                        ?> 
                                                    </td>
                                                    <td style="width:500px">
                                                        <div width="400px" id="error_citizenid" style="visibility:hidden">
                                                            <div class="error-left"></div>
                                                            <div id="error_field_citizenid" class="error-inner">This field is required.</div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        &nbsp;<div id="testDiv"></div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>&nbsp;</th>
                                                    <td valign="top">
                                                        <?php echo form_submit('submit', 'Submit', 'class="form-submit"'); ?>
                                                        <?php echo form_button('reset', 'Reset', 'class="form-reset"'); ?>
                                                    </td>
                                                    <td></td>
                                                </tr>
                                </tbody>
                                <?php echo form_close(); ?>
                            </table>
                            <!-- end id-form  -->

                    </td>
                    <td>



                    </td>
                </tr>
                <tr>
                    <td><img src="images/shared/blank.gif" width="695" height="1"></td>
                    <td></td>
                </tr>
            </tbody></table>


        <div class="clear"></div>


    </div>
    <!--  end content-table-inner  -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
    <th class="sized bottomleft"></th>
    <td id="tbl-border-bottom">&nbsp;</td>
    <th class="sized bottomright"></th>
</tr>
</tbody></table>

<div class="clear">&nbsp;</div>
</div>
</div>